<template>
    <div class="help">
        <h5>
            <span>帮助中心</span>
            <span class="add my-background" @click="goEdit(0)">发布</span>
        </h5>
        <div class="help-top">
            <span class="title">*所属分类</span>
            <el-select v-model="valueLevel1" placeholder="请选择">
                <el-option v-for="item in classificationoptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
            </el-select>
            <!-- <span class="title" style="margin-left:60px;">问题描述</span>
            <input type="text" placeholder="请输入">
            <span class="my-btn my-background button">筛选</span> -->
        </div>
        <div class="table-box">
            <el-table  :data="ProblemData" max-height='500px'  style="width: 100%" fit >
                <el-table-column  prop="id" label="序号" width="49"></el-table-column>
                <el-table-column  prop="levelname" label="所属分类" min-width="50"></el-table-column>
                <el-table-column  prop="name" label="问题描述" min-width="100"></el-table-column>
                <el-table-column  prop="content" label="答案" min-width="140"></el-table-column>
                <el-table-column  prop="hits" label="点击量" min-width="45"></el-table-column>
                <el-table-column  prop="satisfied" label="满意" min-width="45"></el-table-column>
                <el-table-column  prop="dissatisfied" label="不满意" width="66"></el-table-column>
                <el-table-column  label="操作" fixed='right'>
                    <template  slot-scope="scope">
                        <el-button  type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
                        <el-button  type="text" size="small" @click="goDetails(scope.row)">详情</el-button>
                        <!-- <el-button  type="text" size="small" @click="handleClick(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                <p class="content-top">
                    <span>帮助中心-问题描述</span>
                    <span @click="masknum=false"><img src="../assets/img/error.png" alt=""></span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        <span>所属分类</span>
                        <span>{{row.levelname}}</span>
                    </li>
                    <li class="item">
                        <span>问题描述</span>
                        <span>{{row.name}}</span>
                    </li>
                    <li class="item"  style="max-height:100px;min-height:60px;">
                        <span>答案</span>
                        <span>{{row.content}}</span>
                    </li>
                    <li class="item">
                        <span>浏览量</span>
                        <span>{{row.hits}}</span>
                    </li>
                    <li class="item">
                        <span>是否有用</span>
                        <span>有用（{{row.satisfied}}）</span>
                        <span>无用（{{row.dissatisfied}}）</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <el-pagination class="pag"  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage4"  :page-sizes="[5, 10, 15, 20]"  :page-size="5"  layout="total, sizes, prev, pager, next, jumper"  :total=total></el-pagination> -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            masknum:false,
            valueLevel1:'',
            ProblemData: [],//协议数据
            classificationoptions: [],
            row:'',//弹窗数据
            total:102,
            currentPage4: '',
        }
    },
    mounted(){
        this.getclassificationoptions()
        this.getProblemData()
    },
    methods:{
        //获取分类
        getclassificationoptions(){
            this.axios.get('/operate/sys/ProblemLable/getAll').then(res=>{
                this.classificationoptions=res.data.list
                console.log('classificationoptions',this.classificationoptions)
            })
        },
        //获取问题列表
        getProblemData(){
            this.axios.get('/operate/sys/Problem/getindex').then(res=>{
                this.ProblemData=res.data.list
                console.log('ProblemData',this.ProblemData)
                this.ProblemData.forEach(e=>{
                    this.classificationoptions.forEach(ele=>{
                        if(ele.id==e.problemLableId){
                            e.levelname=ele.name
                        }
                        
                    })
                    
                })
            })
        },
        //获取问题列表
        getProblemData1(){
            this.axios.get('/operate/sys/Problem/getProblem?lableid='+this.valueLevel1).then(res=>{
                this.ProblemData=res.data.list
                console.log('ProblemData',this.ProblemData)
                this.ProblemData.forEach(e=>{
                    this.classificationoptions.forEach(ele=>{
                        if(ele.id==e.problemLableId){
                            e.levelname=ele.name
                        }
                        
                    })
                    
                })
            })
        },
        //编辑
        goEdit(row){
            this.$router.push({path:'/index/helpEdit',query:{row:row}})
        },
        goDetails(row){
            this.row=row
            console.log('row',row)
            this.masknum=true
        },
        //下架
        deleteRow(index, rows) {
            // rows.splice(index, 1);
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    watch:{
        valueLevel1(){
            this.getProblemData1()
        }
    }
}
</script>

<style scoped>
.help{
    min-height: calc(100vh - 100px);
    position: relative;
}
.help>h5{
    display: flex;
    justify-content: space-between;
}
.help>h5 .add{
    display: inline-block;
    font-size: 15px;
    width: 62px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
    /* background: rgb(110, 163, 231); */
}
.table-box{
    margin-top: 60px;
}
.help-top{
    margin-top: 50px;
}
.title{
    display: inline-block;
    text-align: right;
    width: 90px;
    margin-right: 15px;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.button{
    margin-left:40px;
    border:0;
    padding:0 25px;
    height: 37px;
    line-height: 37px;
}
.help-top input{
    width: 210px;
    padding-left: 15px;
}
.help-top input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}
.pag{
    /* margin-top: 50px; */
    position: absolute;
    bottom: 60px;
}
</style>

<style scoped>
/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}
.mask .content{
    width: 620px;
    height: 400px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30PX;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
}
.mask .content-top img{
    width: 35px;
}
.content-items{
    margin: 30px;
}
.content-items .item{
    margin:20px 10px;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 100px;
}
</style>